{% extends 'mom.html' %}    <!-- 模板继承 -->
{% load static %}   <!-- 加载静态资源 -->

{% block css %}
    <link href="{% static 'css/bootstrap-datepicker.css' %}" rel="stylesheet" type="text/css"/>
{% endblock %}


{% block content %}
    <div>
        <h1>管理员 <span class="label label-default">FM</span></h1>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <h4>
                <div class="panel-heading">部门信息</div>
            </h4>

            <!-- Table -->
            <table class="table">
                <tr>
                    <td>ID</td>
                    <td>{{ form_de.title.label }}</td>
                    <td>操作</td>
                </tr>
                {% for i in depa %}
                    <tr>
                        <td>{{ i.id }}</td>
                        <td>{{ i.title }}</td>
                        <td><a href="/admin/mf/?del_ap={{ i.id }}">删除</a></td>
                    </tr>
                {% endfor %}
            </table>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <h4>
                <div class="panel-heading">人员信息</div>
            </h4>

            <!-- Table -->
            <table class="table">
                <tr>
                    <td>ID</td>
                    {% for i in form_pe %}
                        <td>{{ i.label }}</td>
                    {% endfor %}
                    <td>操作</td>
                </tr>
                {% for i in inf %}
                    <tr>
                        <td>{{ i.id }}</td>
                        <td>{{ i.name }}</td>
                        <td>{{ i.password }}</td>
                        <td>{{ i.get_gender_display }}</td>
                        <td>{{ i.deparment.title }}</td>
                        <td>{{ i.creat_time }}</td>
                        <td>
                            <a href="/admin/{{ i.id }}/edit/">编辑</a>
                            <a href="{{ del_html }}={{ i.id }}">删除</a>
                        </td>
                    </tr>
                {% endfor %}
            </table>
            {{ the_pag_html }}
        </div>

        <h4>添加人员</h4>
        <form action="/admin/mf/?pos=1" method="post" novalidate><!-- 取消浏览器校验，以便使用服务器校验 -->
            {% csrf_token %}
            <div class="clearfix">
                <!-- 循环操作 -->
                {% for i in form_pe %}
                    <div class="col-xs-6">
                        <div class="input-group">
                            <label>{{ i.label }}</label>
                            {{ i }}
                            <!-- 每一个都自动加入了id='id_字段名'
                             (<input id="id_creat_time">)-->
                        </div>
                        <span style="color: red">{{ i.errors.0 }}</span>
                    </div>
                {% endfor %}
            </div>
            <br/>
            <div class="btn-group" role="group" aria-label="...">
                <input type="submit" class="btn btn-default" value="提交"/>
            </div>
        </form>

        <br/>

        <h4>添加部门</h4>
        <form action="/admin/mf/?pos=2" method="post" novalidate><!-- 取消浏览器校验，以便使用服务器校验 -->
            {% csrf_token %}
            <!-- 单独操作 -->
            <div class="input-group">
                <span class="input-group-addon" id="sizing-addon1">@</span>
                {{ form_de.title }}
            </div>
            <span style="color: red">{{ form_de.title.errors.0 }}</span>
            <br/>

            <div class="btn-group" role="group" aria-label="...">
                <input type="submit" class="btn btn-default" value="提交"/>
            </div>
        </form>

        <hr/>
        <div class="alert alert-danger">{{ err }}</div>
    </div>
{% endblock %}


{% block js %}
    <script type="text/javascript" src="{% static 'js/bootstrap-datepicker.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-datepicker.zh-CN.min.js' %}"></script>

    <script>    //日期插件
    $(function () {
        $('#id_creat_time').datepicker({    //#id_creat_time 是id(<input id="id_creat_time">)
            format: 'yyyy-mm-dd',
            startDate: '0', //只能从当前日期开始，删掉则不受限制
            language: 'zh-CN',
            autoclose: true
        });
    })
    </script>
{% endblock %}
